
<h3 mat-dialog-title class="mb-0">
  {{data ? 'Edit' : 'New'}} questionnaire
</h3>

<form (ngSubmit)="save()">
  <div mat-dialog-content>

    <div class="row">

      <!-- Name -->
      <div class="col-12 pe-lg-0">

        <mat-form-field class="w-100 standalone-field me-2">
          <span
            matPrefix
            matTooltip="Name"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>edit</mat-icon>
            <span class="text-muted">|</span>
          </span>
          <input
            matInput
            [disabled]="this.data"
            placeholder="Name ..."
            [(ngModel)]="name"
            name="name"
            autocomplete="off">
        </mat-form-field>

      </div>

      <!-- Action -->
      <div class="col-12 pe-lg-0">

        <mat-form-field class="w-100 standalone-field me-2">
          <span
            matPrefix
            matTooltip="Action to execute once questionnaire has been done"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>bolt</mat-icon>
            <span class="text-muted">|</span>
          </span>
          <input
            matInput
            placeholder="Action ..."
            [(ngModel)]="action"
            name="action"
            autocomplete="off">
        </mat-form-field>

      </div>

      <!-- Type -->
      <div class="col-12 pe-lg-0">

        <mat-form-field
          class="w-100 standalone-field me-2">
          <span
            matPrefix
            matTooltip="Type of questionnaire"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>bookmark</mat-icon>
            <span class="text-muted ms-1">|</span>
          </span>
          <mat-select
            [(ngModel)]="type"
            name="type"
            placeholder="Type ...">
            <mat-option
              *ngFor="let item of types"
              [value]="item">
              <span class="d-block name-line">{{item}}</span>
            </mat-option>
          </mat-select>
        </mat-form-field>

      </div>

    </div>

  </div>

  <div mat-dialog-actions [align]="'end'">

    <button
      mat-button
      mat-dialog-close>
      Cancel
    </button>

    <button
      mat-flat-button
      color="primary"
      type="submit">
      Save
    </button>

  </div>

</form>
